<template>
  <view class="Plan">
    <!-- 顶部图片+个人信息卡片 -->
    <view class="planTitle">
      <image src="../../static/image/planB.jpg" class="planImg"></image>
      <view class="author" v-if="isLogin">
        <view class="authorInfo">
          <view class="name">Hi~ {{ userInfo.nickName }}</view>
          <view class="intro">这里是你的个人介绍</view>
        </view>
        <image :src="userInfo.avatar" class="avatar"></image>
      </view>
      <view class="tipTitle" v-else>请先去填写个人信息</view>
    </view>

    <!-- 计划标题 -->
    <view class="planStart">
      <text class="content">我的任务</text>
    </view>

    <!-- 任务清单列表 -->
    <scroll-view
      v-if="isLogin && taskList.length"
      scroll-y="true"
      class="scroll"
      @scrolltolower="handleGetMoreData"
    >
      <view class="list-container">
        <view class="leftList">
          <PlanList :list="leftList" />
        </view>
        <view class="rightList">
          <PlanList :list="rightList" />
        </view>
      </view>
    </scroll-view>

    <EmptyBox v-else />

    <!-- 操作对话框 -->
    <view class="dialog" v-if="showDialog">
      <view class="dialogBox animate__animated animate__bounceIn">
        <view class="title">{{ dialogTitle[dialogType] }}</view>
        <view class="inputContent" v-if="!dialogType">
          <text>列表名称：</text>
          <input type="text" class="inputBox" v-model="createPlanContent" />
        </view>
        <view class="inputContent" v-else>
          <text>输入分享码：</text>
          <input type="text" class="inputBox" v-model="inviteCode" />
        </view>
        <view class="btnGroup">
          <van-button
            color="#aaa"
            custom-style="width:160rpx;height:60rpx"
            @click="showDialog = false"
            >取消</van-button
          >
          <van-button
            color="#05A47D"
            custom-style="width:160rpx;height:60rpx"
            @click="handleConfirm(dialogType)"
            >确认</van-button
          >
        </view>
      </view>
    </view>

    <!-- 右下固定操作组件 -->
    <AddPlan @showAddPlanDialog="handleShowPlanDialog" />
  </view>
</template>

<script>
import PlanList from "./components/PlanList.vue";
import AddPlan from "./components/AddPlan.vue";
import { mapState } from "vuex";
import EmptyBox from "../../components/public/EmptyBox.vue";
export default {
  name: "Plan",
  components: {
    PlanList,
    AddPlan,
    EmptyBox,
  },
  mounted() {
    if (!this.userInfo.avatar.length || !this.userInfo.nickName.length) {
      this.isLogin = false;
    } else {
      this.getTaskListData();
    }
  },
  data() {
    return {
      showDialog: false,
      dialogType: 0, // 编辑框类型
      createPlanContent: "",
      inviteCode: "",
      dialogTitle: ["创建任务列表", "添加分享任务"],
      isLogin: true,
      isEnd: false,
      isMore: false,
      currentPage: 0,
    };
  },

  computed: {
    ...mapState(["userInfo"]),
    ...mapState("m_task", ["taskList"]),
    rightList() {
      return this.taskList.filter((item, index) => (index + 1) % 2 === 0);
    },
    leftList() {
      return this.taskList.filter((item, index) => (index + 1) % 2 !== 0);
    },
  },
  beforeDestroy() {
    this.$store.commit("m_task/clearTaskList");
  },

  methods: {
    // dialog框打开逻辑
    handleShowPlanDialog(type) {
      this.dialogType = type;
      this.showDialog = true;
    },

    // 获取任务列表数据
    async getTaskListData(page = 0, limitCount = 5) {
      const userId = this.userInfo._openid;
      await this.$store.dispatch("m_task/getTaskList", {
        page,
        limitCount,
        userId,
      });
    },

    // 上拉获取更多
    async handleGetMoreData() {
      if (this.isEnd) {
        return;
      }
      if (this.isMore) {
        return;
      }
      uni.showLoading({
        title: "加载更多数据",
      });
      this.isMore = true;
      const page = ++this.currentPage,
        userId = this.userInfo._openid,
        lastLength = this.taskList.length;
      await this.$store.dispatch("m_task/getTaskList", {
        page,
        limitCount: 5,
        userId,
        type: 1,
      });
      const currentLength = this.taskList.length;
      console.log(lastLength, currentLength);
      // 判断没有更多的数据了
      if (lastLength === currentLength) {
        this.isEnd = true;
      }
      this.isMore = false;
      uni.hideLoading();
      console.log("到达底部");
    },

    // dialog确认逻辑
    handleConfirm(type) {
      if (this.validateRules(type)) {
        console.log(this.showDialog);
        if (type === 0) {
          this.createTaskList();
        } else {
          this.addTaskByCode();
        }
        this.createPlanContent = "";
        this.inviteCode = "";
        this.showDialog = false;
      }
    },

    // 创建任务列表
    async createTaskList() {
      const listContent = {};
      listContent.title = this.createPlanContent;
      listContent.isMe = false;
      listContent.isTeam = false;
      listContent.createTime = new Date();
      listContent.tasks = [];
      try {
        await this.$store.dispatch("m_task/addTaskList", { listContent });
        uni.showToast({
          title: "创建成功",
          icon: "success",
        });
        this.$store.commit("m_task/clearTaskList");
        this.getTaskListData();
      } catch (err) {
        console.log(err);
      }
    },

    // 通过分享码添加任务
    async addTaskByCode() {
      const allocCode = this.inviteCode,
        listId = this.userInfo.allocTask;
      try {
        const res = await this.$store.dispatch("m_task/addTaskByallocCode", {
          listId,
          allocCode,
        });
        if (res === "empty") {
          uni.showToast({
            icon: "error",
            title: "分享码不存在",
          });
        } else {
          uni.showToast({
            icon: "success",
            title: "已获取到任务",
          });
          this.$store.commit("m_task/clearTaskList");
          this.getTaskListData();
        }
      } catch (err) {
        console.log(err);
      }
    },

    // dialog输入校验
    validateRules(type) {
      if (!this.isLogin) {
        uni.showToast({
          title: "请先登录",
          icon: "error",
          duration: 2000,
        });
        return false;
      }
      if (!this.createPlanContent.trim().length && !type) {
        uni.showToast({
          title: "请输入名称",
          icon: "error",
          duration: 2000,
        });
        return false;
      } else if (!this.inviteCode.trim().length && type) {
        uni.showToast({
          title: "请输入分享码",
          icon: "error",
          duration: 2000,
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.Plan {
  width: 100vw;
  padding-bottom: 120rpx;
  .planTitle {
    position: relative;
    width: 100vw;
    height: 300rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    .planImg {
      position: absolute;
      left: 0;
      width: 100vw;
      height: 300rpx;
    }
    .author {
      position: absolute;
      top: 180rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 85vw;
      height: 200rpx;
      padding: 10rpx 20rpx;
      box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: #fff;
      border-radius: 10rpx;
      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2);
      }
      .name {
        font-weight: 700;
        font-size: 40rpx;
        margin-bottom: 15rpx;
      }
      .intro {
        font-size: 26rpx;
        color: #aaa;
      }
    }
    .tipTitle {
      position: absolute;
      top: 350rpx;
      font-weight: 700;
      font-size: 40rpx;
    }
  }
  .planStart {
    width: 100vw;
    height: 190rpx;
    background-color: #fff;
    display: flex;
    align-items: flex-end;
    padding-bottom: 35rpx;
    .content {
      font-weight: 700;
      font-size: 40rpx;
      margin-left: 30rpx;
    }
  }
  .scroll {
    height: calc(100vh - 90rpx - 550rpx);
  }

  .list-container {
    display: flex;
    justify-content: space-around;
    padding: 10rpx;
    margin-top: 30rpx;
  }

  .dialog {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    .dialogBox {
      padding: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        font-weight: 500;
        font-size: 36rpx;
        margin-bottom: 10rpx;
      }
      .inputContent {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 20rpx;
        margin-left: 20rpx;
        .inputBox {
          border: 1px solid #bbb;
          border-radius: 5rpx;
          padding: 5rpx;
        }
      }
      .btnGroup {
        width: 80%;
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
